<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>直播</title>
    <link href="/media/video-js.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css">
    <script src="/media/video.min.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>

<video id="video_1" class="video-js vjs-default-skin" controls
       preload="auto" width="100%" height="100%" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
    <source type="rtmp/flv" src="rtmp://<%=host%>/live/<%=channel%>"/>
</video>
<div style="display: none;">
    <span id="dir"><%=dir%></span><span id="filename"><%=filename%></span>
</div>
<div style="position: absolute; top: 0; text-align: center; z-index: 99; color: #ffff00;">
    <span><strong><%=channel%></strong></span>
</div>
<div style="text-align: center;">
    <div class="input-group" style="float: left;">
        <input title="时" id="hour" type="number" style="width: 130px;" value="0" class="form-control"/>
        <input title="分" id="minute" type="number" style="width: 130px;" value="0" class="form-control"/>
        <button class="btn btn-default" onclick="forward()"><i class="fa fa-forward"></i></button>
    </div>
    <div class="btn-group">
        <button class="btn btn-success" onclick="play()"><i class="fa fa-play"></i></button>
        <button class="btn btn-warning" onclick="pause()"><i class="fa fa-pause"></i></button>
        <button class="btn btn-danger" onclick="stop()"><i class="fa fa-stop"></i></button>
    </div>
    <div class="btn-group" style="float: right;">
        <button class="btn btn-default" onclick="reload(1)">标清</button>
        <button class="btn btn-default" onclick="reload(2)">高清</button>
        <button class="btn btn-default" onclick="reload(3)">超清</button>
    </div>
</div>

<script type="text/javascript" src="/javascripts/jquery/jquery.min.js"></script>
<script>
    //videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
    var dir = $('#dir').text();
    var filename = $('#filename').text();
    var player = videojs('video_1', {
        width: window.innerWidth,
        height: window.innerWidth*3/4
    }); //my-player为页面video元素的id
    player.load();
    player.play(); //播放
    function play(){
        player.play();
    }
    function pause(){
        player.pause();
    }
    function reload(scale) {
        stop(function(){
            $.ajax({
                url: '/live/video',
                method: 'POST',
                data: {
                    dir: dir,
                    name: filename,
                    scale: scale || 1,
                    seek: player.currentTime() || 0
                },
                json: true,
                success: function(){

                }
            });
        });
    }
    var hour = $('#hour');
    var minute = $('#minute');
    function forward(seek) {
        stop(function(){
            $.ajax({
                url: '/live/video',
                method: 'POST',
                data: {
                    dir: dir,
                    name: filename,
                    seek: seek || (hour.val()*3600+minute.val()*60)
                },
                json: true
            })
        });
    }
    function stop(cb){
        $.ajax({
            url: '/live/video/'+ $('strong').text(),
            method: 'DELETE',
            complete: function(){
                if(typeof(cb) === 'function') {
                    setTimeout(cb, 3000)
                }
            }
        });
    }
</script>
</body>
<!--<script src="http://vjs.zencdn.net/5.20.1/video.js"></script>-->
</html>